<template>
  <div class="w-full p-t-76px p-b-40px bg-#fafafa">
    <div class="w-1283px m-[0_auto]">
      <!-- top -->
      <div class="flex gap16px">
        <div class="w-741px flex-shrink-0">
          <el-carousel height="262px" trigger="click" arrow="never">
            <el-carousel-item v-for="item in 4" :key="item">
              <h3 class="small justify-center" text="2xl">{{ item }}</h3>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="w-full flex flex-col justify-between gap-20px">
          <div class="flex-1 p-[16px_24px] bg-#fff box-border">
            <div class="flex justify-between">
              <span class="leading-40px text-18px">热门活动</span>
              <div class="text-12px c-#999 cursor-pointer">
                <span class="leading-40px">更多</span>
                <span class="iconfont icon-jiantou2 v-text-bottom"></span>
              </div>
            </div>

            <ul class="m-t-10px">
              <li
                class="flex justify-between text-14px list-none relative pl-16px before:content-[''] before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-2 before:h-2 before:rounded-full before:bg-#e7e7e7"
              >
                <span class="cursor-pointer">动漫二创激励计划·国漫季</span>
                <span class="text-12px cursor-pointer c-#757575"
                  >211.2万人参与</span
                >
              </li>
              <li
                class="flex justify-between cursor-pointer m-t-10px text-14px list-none relative pl-16px before:content-[''] before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-2 before:h-2 before:rounded-full before:bg-#e7e7e7"
              >
                <span class="cursor-pointer"
                  >崩坏星穹铁道3.2创作者激励计划</span
                >
                <span class="text-12px cursor-pointer c-#757575"
                  >321.2万人参与</span
                >
              </li>
            </ul>
          </div>

          <!-- 图片比例有问题：会拉伸->contain -->
          <img
            class="w-full h-104px"
            src="../../../assets/img/createCenter/dk.png"
            alt=""
          />
        </div>
      </div>

      <!-- 数据中心 -->
      <div class="m-t-16px bg-#fff p-24px">
        <!-- 标题label -->
        <div class="flex justify-between">
          <div class="text-16px leading-30px">
            <span
              class="m-r-20px cursor-pointer"
              :class="{ 'c-#00a1d6': activeDataLabelIndex === 0 }"
              @click="activeDataLabelIndex = 0"
            >
              视频数据
            </span>
            <span
              class="m-r-20px cursor-pointer"
              :class="{ 'c-#00a1d6': activeDataLabelIndex === 1 }"
              @click="activeDataLabelIndex = 1"
            >
              专栏数据
            </span>
          </div>
          <div class="text-11px leading-30px c-#999 cursor-pointer">
            每日中午12点更新昨日数据
            <span class="iconfont icon-jiantou2 v-end"></span>
          </div>
        </div>

        <!-- 数据content -> 视频数据 -->
        <div
          v-if="activeDataLabelIndex === 0 && videoData"
          class="grid grid-cols-4 grid-rows-2 gap-10px m-t-10px"
        >
          <div
            class="h-88px bg-[rgba(0,174,236,0.1)] b-rd-10px p-16px box-border cursor-pointer"
          >
            <div class="flex items-center c-#61666d">
              <span class="iconfont icon-fensi m-r-5px"></span>
              <span>粉丝总数</span>
              <span class="iconfont icon-jiantou2"></span>
            </div>
            <p class="text-22px font-800 c-#00aeec m-t-8px">
              {{ videoData.followingCount }}
            </p>
          </div>

          <div
            class="h-88px bg-[rgba(0,174,236,0.1)] b-rd-10px p-16px box-border cursor-pointer"
          >
            <div class="flex items-center c-#61666d">
              <span class="iconfont icon-bofang m-r-5px"></span>
              <span>播放量</span>
              <span class="iconfont icon-jiantou2"></span>
            </div>
            <p class="text-22px font-800 c-#00aeec m-t-8px">
              {{ videoData.playCount }}
            </p>
          </div>

          <div
            class="h-88px bg-[rgba(0,174,236,0.1)] b-rd-10px p-16px box-border cursor-pointer"
          >
            <div class="flex items-center c-#61666d">
              <span class="iconfont icon-pinglun m-r-5px"></span>
              <span>评论</span>
              <span class="iconfont icon-jiantou2"></span>
            </div>
            <p class="text-22px font-800 c-#00aeec m-t-8px">
              {{ videoData.commentCount }}
            </p>
          </div>

          <div
            class="h-88px bg-[rgba(0,174,236,0.1)] b-rd-10px p-16px box-border cursor-pointer"
          >
            <div class="flex items-center c-#61666d">
              <span class="iconfont icon-danmushu m-r-5px"></span>
              <span>弹幕</span>
              <span class="iconfont icon-jiantou2"></span>
            </div>
            <p class="text-22px font-800 c-#00aeec m-t-8px">
              {{ videoData.danmakuCount }}
            </p>
          </div>

          <div
            class="h-88px bg-[rgba(0,174,236,0.1)] b-rd-10px p-16px box-border cursor-pointer"
          >
            <div class="flex items-center c-#61666d">
              <span class="iconfont icon-icon m-r-5px"></span>
              <span>点赞</span>
              <span class="iconfont icon-jiantou2"></span>
            </div>
            <p class="text-22px font-800 c-#00aeec m-t-8px">
              {{ videoData.likeCount }}
            </p>
          </div>

          <div
            class="h-88px bg-[rgba(0,174,236,0.1)] b-rd-10px p-16px box-border cursor-pointer"
          >
            <div class="flex items-center c-#61666d">
              <span class="iconfont icon-fenxiang_1 m-r-5px"></span>
              <span>分享</span>
              <span class="iconfont icon-jiantou2"></span>
            </div>
            <p class="text-22px font-800 c-#00aeec m-t-8px">
              {{ videoData.shareCount }}
            </p>
          </div>

          <div
            class="h-88px bg-[rgba(0,174,236,0.1)] b-rd-10px p-16px box-border cursor-pointer"
          >
            <div class="flex items-center c-#61666d">
              <span class="iconfont icon-shoucang1 m-r-5px"></span>
              <span>收藏</span>
              <span class="iconfont icon-jiantou2"></span>
            </div>
            <p class="text-22px font-800 c-#00aeec m-t-8px">
              {{ videoData.favoriteCount }}
            </p>
          </div>

          <div
            class="h-88px bg-[rgba(0,174,236,0.1)] b-rd-10px p-16px box-border cursor-pointer"
          >
            <div class="flex items-center c-#61666d">
              <span class="iconfont icon-bi m-r-5px"></span>
              <span>投币</span>
              <span class="iconfont icon-jiantou2"></span>
            </div>
            <p class="text-22px font-800 c-#00aeec m-t-8px">
              {{ videoData.coinCount }}
            </p>
          </div>
        </div>

        <!-- 数据content -> 专栏数据 -->
        <!-- <div
          v-if="activeDataLabelIndex === 1"
          class="grid grid-cols-3 grid-rows-2 gap-10px m-t-10px"
        >
          <div
            class="h-88px bg-[rgba(0,174,236,0.1)] p-16px box-border cursor-pointer c-#61666d text-12px"
          >
            <div class="flex items-center">
              <span>粉丝数</span>
              <span class="iconfont icon-jiantou2"></span>
            </div>
            <p class="text-22px font-800 c-#00aeec m-y-3px">3</p>
            <p>
              昨日：
              <span class="c-#00a1d6">--</span>
            </p>
          </div>

          <div
            class="h-88px bg-[rgba(0,174,236,0.1)] p-16px box-border cursor-pointer c-#61666d text-12px"
          >
            <div class="flex items-center">
              <span>浏览量</span>
            </div>
            <p class="text-22px font-800 c-#00aeec m-y-3px">0</p>
            <p>
              昨日：
              <span class="c-#00a1d6">--</span>
            </p>
          </div>

          <div
            class="h-88px bg-[rgba(0,174,236,0.1)] p-16px box-border cursor-pointer c-#61666d text-12px"
          >
            <div class="flex items-center">
              <span>评论数</span>
            </div>
            <p class="text-22px font-800 c-#00aeec m-y-3px">0</p>
            <p>
              昨日：
              <span class="c-#00a1d6">--</span>
            </p>
          </div>

          <div
            class="h-88px bg-[rgba(0,174,236,0.1)] p-16px box-border cursor-pointer c-#61666d text-12px"
          >
            <div class="flex items-center">
              <span>收藏数</span>
            </div>
            <p class="text-22px font-800 c-#00aeec m-y-3px">0</p>
            <p>
              昨日：
              <span class="c-#00a1d6">--</span>
            </p>
          </div>

          <div
            class="h-88px bg-[rgba(0,174,236,0.1)] p-16px box-border cursor-pointer c-#61666d text-12px"
          >
            <div class="flex items-center">
              <span>点赞数</span>
            </div>
            <p class="text-22px font-800 c-#00aeec m-y-3px">0</p>
            <p>
              昨日：
              <span class="c-#00a1d6">--</span>
            </p>
          </div>

          <div
            class="h-88px bg-[rgba(0,174,236,0.1)] p-16px box-border cursor-pointer c-#61666d text-12px"
          >
            <div class="flex items-center">
              <span>分享数</span>
            </div>
            <p class="text-22px font-800 c-#00aeec m-y-3px">0</p>
            <p>
              昨日：
              <span class="c-#00a1d6">--</span>
            </p>
          </div>
        </div> -->
      </div>

      <!-- 评论 -->
      <div class="m-t-16px bg-#fff p-24px">
        <!-- 标题label -->
        <div class="flex justify-between items-center">
          <p class="c-#00a1d6 text-16px">评论</p>
          <div class="text-11px leading-30px c-#999 cursor-pointer">
            更多
            <span class="iconfont icon-jiantou2 v-end"></span>
          </div>
        </div>

        <!-- 评论数据 -->
        <div class="flex justify-between gap-20px">
          <div class="flex gap-16px m-t-16px flex-1">
            <img class="w-28px h-28px b-rd-full" :src="heardPic" alt="" />
            <div class="flex-1">
              <div class="text-13px flex items-center">
                <span class="c-#505050">一枚路过的程序猿</span>
                <span
                  class="inline-block w-3px h-3px rd-full bg-#757575 m-x-10px"
                ></span>
                <span class="c-#757575">08-08 20:13</span>
              </div>
              <div class="text-14px c-#212121 h-18px leading-18px m-t-10px">
                啦啦啦啦我是评论啊
              </div>
              <div
                class="text-12px c-#505050 m-t-20px flex items-center gap-30px"
              >
                <div class="cursor-pointer">
                  <span class="iconfont icon-icon m-r-8px"></span>
                  <span>0</span>
                </div>
                <div class="cursor-pointer">
                  <span class="iconfont icon-pinglun m-r-8px"></span>
                  <span>回复</span>
                </div>
              </div>

              <div
                class="p-y-16px text-12px c-#757575 b-t b-t-solid b-t-#f4f4f4 m-t-20px"
              >
                来源：有着鸟中哈士奇之称的它，我表示不服
              </div>
            </div>
          </div>

          <div class="flex gap-16px m-t-16px flex-1">
            <img class="w-28px h-28px b-rd-full" :src="heardPic" alt="" />
            <div class="flex-1">
              <div class="text-13px flex items-center">
                <span class="c-#505050">一枚路过的程序猿</span>
                <span
                  class="inline-block w-3px h-3px rd-full bg-#757575 m-x-10px"
                ></span>
                <span class="c-#757575">08-08 20:13</span>
              </div>
              <div class="text-14px c-#212121 h-18px leading-18px m-t-10px">
                啦啦啦啦我是评论啊
              </div>
              <div
                class="text-12px c-#505050 m-t-20px flex items-center gap-30px"
              >
                <div class="cursor-pointer">
                  <span class="iconfont icon-icon m-r-8px"></span>
                  <span>0</span>
                </div>
                <div class="cursor-pointer">
                  <span class="iconfont icon-pinglun m-r-8px"></span>
                  <span>回复</span>
                </div>
              </div>

              <div
                class="p-y-16px text-12px c-#757575 b-t b-t-solid b-t-#f4f4f4 m-t-20px"
              >
                来源：有着鸟中哈士奇之称的它，我表示不服
              </div>
            </div>
          </div>

          <div class="flex gap-16px m-t-16px flex-1">
            <img class="w-28px h-28px b-rd-full" :src="heardPic" alt="" />
            <div class="flex-1">
              <div class="text-13px flex items-center">
                <span class="c-#505050">一枚路过的程序猿</span>
                <span
                  class="inline-block w-3px h-3px rd-full bg-#757575 m-x-10px"
                ></span>
                <span class="c-#757575">08-08 20:13</span>
              </div>
              <div class="text-14px c-#212121 h-18px leading-18px m-t-10px">
                啦啦啦啦我是评论啊
              </div>
              <div
                class="text-12px c-#505050 m-t-20px flex items-center gap-30px"
              >
                <div class="cursor-pointer">
                  <span class="iconfont icon-icon m-r-8px"></span>
                  <span>0</span>
                </div>
                <div class="cursor-pointer">
                  <span class="iconfont icon-pinglun m-r-8px"></span>
                  <span>回复</span>
                </div>
              </div>

              <div
                class="p-y-16px text-12px c-#757575 b-t b-t-solid b-t-#f4f4f4 m-t-20px"
              >
                来源：有着鸟中哈士奇之称的它，我表示不服
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 创作学院 -->
      <div class="m-t-16px bg-#fff p-24px">
        <!-- 标题label -->
        <div class="flex justify-between items-center">
          <p class="c-#222 text-16px">创作学院</p>
          <div class="text-11px leading-30px c-#999 cursor-pointer">
            更多
            <span class="iconfont icon-jiantou2 v-end"></span>
          </div>
        </div>

        <div class="flex justify-between gap-10px m-t-16px">
          <div class="flex-1 cursor-pointer">
            <img
              class="w-full"
              src="../../../assets/img/createCenter/test-1.jpg"
            />
            <p class="text-15px m-t-10px">优秀头像选取公式</p>
            <div class="m-t-20px">
              <span class="text-12px c-#ff7f24 bg-#fff0e3 p-x-5px m-r-20px">
                进阶技巧
              </span>
              <span class="text-13px c-#222">哔哩哔哩客服</span>
            </div>
          </div>
          <div class="flex-1 cursor-pointer">
            <img
              class="w-full"
              src="../../../assets/img/createCenter/test-1.jpg"
            />
            <p class="text-15px m-t-10px">优秀头像选取公式</p>
            <div class="m-t-20px">
              <span class="text-12px c-#ff7f24 bg-#fff0e3 p-x-5px m-r-20px">
                进阶技巧
              </span>
              <span class="text-13px c-#222">哔哩哔哩客服</span>
            </div>
          </div>
          <div class="flex-1 cursor-pointer">
            <img
              class="w-full"
              src="../../../assets/img/createCenter/test-1.jpg"
            />
            <p class="text-15px m-t-10px">优秀头像选取公式</p>
            <div class="m-t-20px">
              <span class="text-12px c-#ff7f24 bg-#fff0e3 p-x-5px m-r-20px">
                进阶技巧
              </span>
              <span class="text-13px c-#222">哔哩哔哩客服</span>
            </div>
          </div>
          <div class="flex-1 cursor-pointer">
            <img
              class="w-full"
              src="../../../assets/img/createCenter/test-1.jpg"
            />
            <p class="text-15px m-t-10px">优秀头像选取公式</p>
            <div class="m-t-20px">
              <span class="text-12px c-#ff7f24 bg-#fff0e3 p-x-5px m-r-20px">
                进阶技巧
              </span>
              <span class="text-13px c-#222">哔哩哔哩客服</span>
            </div>
          </div>
          <div class="flex-1 cursor-pointer">
            <img
              class="w-full"
              src="../../../assets/img/createCenter/test-1.jpg"
            />
            <p class="text-15px m-t-10px">优秀头像选取公式</p>
            <div class="m-t-20px">
              <span class="text-12px c-#ff7f24 bg-#fff0e3 p-x-5px m-r-20px">
                进阶技巧
              </span>
              <span class="text-13px c-#222">哔哩哔哩客服</span>
            </div>
          </div>
          <div class="flex-1 cursor-pointer">
            <img
              class="w-full"
              src="../../../assets/img/createCenter/test-1.jpg"
            />
            <p class="text-15px m-t-10px">优秀头像选取公式</p>
            <div class="m-t-20px">
              <span class="text-12px c-#ff7f24 bg-#fff0e3 p-x-5px m-r-20px">
                进阶技巧
              </span>
              <span class="text-13px c-#222">哔哩哔哩客服</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 创作素材 -->
      <div class="m-t-16px bg-#fff p-24px">
        <!-- 标题label -->
        <p class="c-#222 text-16px">创作素材</p>

        <el-tabs
          v-model="activeName"
          class="flex justify-between gap-10px"
          @tab-click="handleClick"
        >
          <el-tab-pane label="视频素材9999+" name="1" class="flex gap-15px">
            <div class="cursor-pointer flex-1">
              <video
                ref="videoRef1"
                loop
                muted
                src="../../../assets/img/createCenter/mp4-test.mp4"
                class="w-full b-rd-4px"
                @mouseenter="videoRef1.play()"
                @mouseleave="videoRef1.pause()"
              />
              <p class="m-y-15px text-14px">曹操盖饭 名场面</p>
              <div class="flex justify-between items-center">
                <div class="flex items-center gap-15px">
                  <img class="b-rd-full h-32px w-32px" :src="heardPic" alt="" />
                  <span class="text-14px c-#666">一枚路过的程序猿</span>
                </div>
                <span class="text-12px c-#999">使用量 154.7万</span>
              </div>
            </div>
            <div class="cursor-pointer flex-1">
              <video
                ref="videoRef2"
                loop
                muted
                src="../../../assets/img/createCenter/mp4-test.mp4"
                class="w-full b-rd-4px"
                @mouseenter="videoRef2.play()"
                @mouseleave="videoRef2.pause()"
              />
              <p class="m-y-15px text-14px">曹操盖饭 名场面</p>
              <div class="flex justify-between items-center">
                <div class="flex items-center gap-15px">
                  <img class="b-rd-full h-32px w-32px" :src="heardPic" alt="" />
                  <span class="text-14px c-#666">一枚路过的程序猿</span>
                </div>
                <span class="text-12px c-#999">使用量 154.7万</span>
              </div>
            </div>
            <div class="cursor-pointer flex-1">
              <video
                ref="videoRef3"
                loop
                muted
                src="../../../assets/img/createCenter/mp4-test.mp4"
                class="w-full b-rd-4px"
                @mouseenter="videoRef3.play()"
                @mouseleave="videoRef3.pause()"
              />
              <p class="m-y-15px text-14px">曹操盖饭 名场面</p>
              <div class="flex justify-between items-center">
                <div class="flex items-center gap-15px">
                  <img class="b-rd-full h-32px w-32px" :src="heardPic" alt="" />
                  <span class="text-14px c-#666">一枚路过的程序猿</span>
                </div>
                <span class="text-12px c-#999">使用量 154.7万</span>
              </div>
            </div>
            <div class="cursor-pointer flex-1">
              <video
                ref="videoRef4"
                loop
                muted
                src="../../../assets/img/createCenter/mp4-test.mp4"
                class="w-full b-rd-4px"
                @mouseenter="videoRef4.play()"
                @mouseleave="videoRef4.pause()"
              />
              <p class="m-y-15px text-14px">曹操盖饭 名场面</p>
              <div class="flex justify-between items-center">
                <div class="flex items-center gap-15px">
                  <img class="b-rd-full h-32px w-32px" :src="heardPic" alt="" />
                  <span class="text-14px c-#666">一枚路过的程序猿</span>
                </div>
                <span class="text-12px c-#999">使用量 154.7万</span>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="贴纸素材9999+" name="2">
            该功能正在开发中，请耐心等待~
          </el-tab-pane>
          <el-tab-pane label="虚拟形象" name="3">
            <div class="flex gap-15px">
              <div class="b b-solid b-#eceef3 b-rd-4px flex-1">
                <img
                  src="../../../assets/img/createCenter/gif-1.gif"
                  class="w-full h-full object-cover b-rd-4px"
                  alt=""
                />
              </div>
              <div class="b b-solid b-#eceef3 b-rd-4px flex-1">
                <img
                  src="../../../assets/img/createCenter/gif-2.gif"
                  class="w-full h-full object-cover b-rd-4px"
                  alt=""
                />
              </div>
              <div class="b b-solid b-#eceef3 b-rd-4px flex-1">
                <img
                  src="../../../assets/img/createCenter/gif-3.gif"
                  class="w-full h-full object-cover b-rd-4px"
                  alt=""
                />
              </div>
              <div class="b b-solid b-#eceef3 b-rd-4px flex-1">
                <img
                  src="../../../assets/img/createCenter/gif-4.gif"
                  class="w-full h-full object-cover b-rd-4px"
                  alt=""
                />
              </div>
              <div class="b b-solid b-#eceef3 b-rd-4px flex-1">
                <img
                  src="../../../assets/img/createCenter/gif-5.gif"
                  class="w-full h-full object-cover b-rd-4px"
                  alt=""
                />
              </div>
              <div class="b b-solid b-#eceef3 b-rd-4px flex-1">
                <img
                  src="../../../assets/img/createCenter/gif-6.gif"
                  class="w-full h-full object-cover b-rd-4px"
                  alt=""
                />
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import heardPic from "@/assets/img/home/data-head.jpg";
import type { TabsPaneContext } from "element-plus";
import { videoData as videoDataApi } from "@/api/video";
import type { VideoData } from "@/api/video/types";

// 数据中心激活的label
const activeDataLabelIndex = ref(0);
const videoData = ref<VideoData>();

// 创作素材激活的label
const activeName = ref("1");

// 创作素材视频对象
const videoRef1 = ref(null);
const videoRef2 = ref(null);
const videoRef3 = ref(null);
const videoRef4 = ref(null);

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};

const getVideoData = async () => {
  const videoDataRes = await videoDataApi();
  videoData.value = videoDataRes.data;
};

onMounted(() => {
  getVideoData();
});
</script>

<style scoped>
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 262px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

::v-deep(.el-carousel__indicator button) {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.3s;
}

::v-deep(.el-carousel__indicator.is-active button) {
  background-color: skyblue;
  transform: scale(1.6);
}
</style>
